<template>
	<view class="content">
		<view class="title">{{title}}</view>
		<view class="authorize">
			点击:<UPButton class="customBtn"
				  @click="btnClick"
				  :scope="scope"
				  :style="{width:'8rem',height:'2.4rem',backgroundColor:'red'}">
			   授权button
			</UPButton>
		</view>
		<view class="authorize" style="margin-top: 50rpx;display: flex">code:
			<input type="text" style="width: 8rem;" v-model="code" placeholder="长按复制code" />
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title:"uniapp授权",
				scope:"scope.mobile",
				code:""
			}
		},
		onLoad() {
			upsdk.pluginReady (function(){
			    upsdk.setTitleStyle({
			      // 可选，导航栏(含状态栏)背景色及透明度。16进制，前2位(8F)透明度，后六位(FFFFFF)颜色，仅对当前页有效，其余页还是申请配置的导航默认颜色
			      navBackgroundColor:'0x8FFFFFFF',
			      appletStyle: 'black', //可选，black-黑色主题，white-白色主题
			      backBtnVisible: '0', // 可选，左侧返回按钮是否显示。'0'不显示，'1'显示，不传或空则默认显示
			      appletTitleBarVisible: '1',// 可选，标题栏是否显示。'0'不显示，'1'显示，默认显示
			      appletTitleGradientOrient: 'top', // 可选，渐变色方向，支持top、bottom、left、right
			      appletTitleGradientStartColor:'0x8FFFFFFF',//渐变起始颜色
			      appletTitleGradientEndColor: '0x88888888' //渐变结束颜色
			    });
			});
		},
		methods: {
			//授权联登
			btnClick(result) {
				alert(result.code)
				this.code = result.code
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.title{
		text-align: center;font-size: 60rpx;padding: 100rpx;
	}
	.authorize{
		display: flex;align-items: center;justify-content: space-between;width: 50%;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}
</style>
